<template>
	<view class="Box_dedail">
		<swiper class="Myswiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="item in goods_data_obj.pics" :key="item.goods_id">
				<image :src="item.pics_mid_url" mode=""></image>
			</swiper-item>
		</swiper>
		<view class="text_info">
			<view class="price">￥{{goods_data_obj.goods_price}}</view>
			<view class="mid">
				<view class="m_left">{{goods_data_obj.goods_name}}</view>
				<view class="m_right" @click="add_collect">
					<uni-icons :class="{on_Collect: goods_data_obj.isCollect}" type="star" size="15"></uni-icons>
					<text>收藏</text>
				</view>
			</view>
			<view class="tip">快递:免运费 {{goods_totle}}</view>
		</view>
		<rich-text :nodes="goods_data_obj.goods_introduce"></rich-text>
		<uni-goods-nav class="shopCartnav" :fill="true"  :options="options" :buttonGroup="buttonGroup"  @click="shopCart_lefts" @buttonClick="shopCart_rights" />
	</view>
</template>

<script>
	import { mapMutations, mapGetters } from 'vuex'
	export default {
		data() {
			return {
				goods_id: null,
				goods_data_obj: {},
				
				// 组件配置
				options: [
					{
						icon: 'shop',
						text: '店铺',
						infoBackgroundColor:'#007aff',
						infoColor:"red"
					}, {
						icon: 'cart',
						text: '购物车',
						info: 0
					},
				],
				buttonGroup: [
					{
					  text: '加入购物车',
					  backgroundColor: '#ff0000',
					  color: '#fff'
					},
					{
					  text: '立即购买',
					  backgroundColor: '#ffa200',
					  color: '#fff'
					}
				]
			};
		},
		computed: {
			...mapGetters('m_shopCar', ['goods_totle'])
		},
		watch: {
			goods_totle: {
				handler (new_val) {
					this.options[1].info = new_val;
				},
				immediate: true,
				deep: true
			}
		},
		onLoad({id}) {
			this.goods_id = id;
			this.get_goodsItem_data()
		},
		methods:{
			...mapMutations('m_shopCar', ['add_car_list']),
			async get_goodsItem_data() {
				const {data: res} = await uni.$http.get('/api/public/v1/goods/detail', {
					goods_id: this.goods_id
				})
				res.message.goods_introduce = res.message.goods_introduce.replace(/<img/g, '<img style="display: block;"');
				this.goods_data_obj = res.message;
			},
			add_collect() {
				if(this.goods_data_obj.isCollect) {
					this.$set(this.goods_data_obj, "isCollect", false)
				}else {
					this.$set(this.goods_data_obj, "isCollect", true)
				}
			},
			shopCart_lefts(e) {
				if(e.content.text === '购物车') {
					uni.switchTab({
						url: '../../pages/shopCar/shopCar'
					})
				}
			},
			shopCart_rights(e) {
				if(e.content.text === '加入购物车') {
					const data = {
						goods_id: this.goods_data_obj.goods_id,
						goods_name: this.goods_data_obj.goods_name,
						goods_price: this.goods_data_obj.goods_price,
						goods_count: 1,
						goods_small_logo: this.goods_data_obj.goods_small_logo,
						goods_state: this.goods_data_obj.goods_state,
					}
					this.add_car_list(data);
				}
			}
		}
	}
</script>

<style lang="scss">
.Box_dedail {
	padding-bottom: 100rpx;
}
.Myswiper {
	width: 100%;
	height: 700rpx;
	image {
		width: 100%;
		height: 100%;
	}
}
.text_info {
	padding: 20rpx 50rpx 20rpx 15rpx;
	box-sizing: border-box;
	.price {
		color: #be0000;
	}
	.mid {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 20rpx 0;
		.m_left {
			max-width: 575rpx;
		}
		.m_right {
			display: flex;
			flex-direction: column;
			align-items: center;
			text {
				font-size: 20rpx;
			}
		}
	}
	.tip {
		color: #C0C0C0;
	}
}
.on_Collect {
	background-color: yellow;
}
.shopCartnav {
	width: 100%;
	position: fixed;
	bottom: 0px;
	z-index: 10;
}
</style>
